<template>
	<div class="content">
		<p style="height: 16rpx;"></p>
		<div class="member_box">
			<div class="member">
				<img v-for="(item,index) in list" :src="item.avatar?item.avatar:'/static/mr_tx.png'"  alt="">
				<button class="anniu" open-type="share">
					<u-icon name="plus" color="#999999" size="22"></u-icon>
				</button>
			</div>
			<p class="more" @click="toUser">查看更多群成员 ></p>
		</div>
		<div class="list">
			<div>
				<img src="/static/group-icon1.png" alt="">
				<div class="msg">
					<p class="name">我的ID</p>
					<div class="text" @click="copyId(userMsg.id)">
						{{userMsg.id}}
						<img src="/static/group-icon2.png" alt="">
					</div>
				</div>
				<p class="line"></p>
			</div>
		</div>

		<div class="list">
			<!-- <div @click="toWallet">
				<img src="/static/group-icon3.png" alt="">
				<div class="msg">
					<p class="name">我的钱包</p>
					<div class="text">
						<p>¥0.00</p>
						<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
					</div>
				</div>
				<p class="line"></p>
			</div> -->
			<div>
				<img src="/static/group-icon6.png" alt="">
				<div class="msg">
					<p class="name">我的接单区域</p>
					<div class="text" @click="addJd">
						<p>{{userMsg.grounpName?userMsg.grounpName+'群':'暂无'}}</p>
						<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
					</div>
				</div>
				<p class="line"></p>
			</div>
			<div @click="toMy">
				<img src="/static/group-icon4.png" alt="">
				<div class="msg">
					<p class="name">我的个人资料</p>
					<div class="text">
						<p><img :src="userMsg.avatar?userMsg.avatar:'/static/mr_tx.png'" alt="">{{userMsg.nickname}}</p>
						<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
					</div>
				</div>
				<p class="line"></p>
			</div>
			<div @click="clickTips">
				<img src="/static/group-icon5.png" alt="">
				<div class="msg">
					<p class="name">查找聊天内容</p>
					<div class="text">
						<p></p>
						<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
					</div>
				</div>
				<p class="line"></p>
			</div>
		</div>
	
		<!-- 选择接单群 -->
        <!-- <city-picker :isRefresh1="isRefresh1" :show="isCityShow" @closeCity="closeCity" @confirm="changeCity"></city-picker> -->
		
		<u-picker 
			@cancel=closePop 
			@close="closePop" 
			closeOnClickOverlay 
			title="选择接单群" 
			:show="show" 
			:columns="columns"
			keyName="name"
			@confirm="changeCity"
		></u-picker>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	import api from '@/api';
	export default {
		data() {
			return {
				show:false,
                columns: [],
                columnData: [],
				param:{
					pageNo:0,
					pageSize:23,
					groupId:1
				},
				list:[],
				userMsg:{},
				shareUserId:''
			}
		},
		computed: {
			...mapState({
				userId: state => state.user.userId,
				token: state => state.user.token,
			})
		},
		methods: {

			clickTips(){
				this.$toast('该功能即将上线！')
			},

			// 获取列表
			getList(){
				api.user.sell_group().then(res=>{
					if(res.code == 200){
						this.columns = [res.data]
						res.data.map(item=>{
							if(item.id == this.userMsg.groupId){
								this.userMsg.grounpName = item.name
							}
						})
					}
				})
			},

			// 确定接单群
            changeCity(e){
                console.log(e)
				let data = {
					groupId:e.value[0].id,
				}
				api.user.update_user(data).then(res=>{
					if(res.code == 200){
						this.show = false
						this.getUserInfo()
					}else{
						this.$toast(res.msg)
					}
				})
            },

            // 关闭刷单群弹窗
            closePop(){
                this.show = false
            },
			
			addJd(){
				if(!this.token){
					uni.navigateTo({
						url: `/pages/authorization/index?shareUserId=${this.shareUserId}`
					});
					return
				}
				this.show = true
			},

			// 复制id
			copyId(id){
				uni.setClipboardData({
					data: `${id}`,
					success:()=>{
						this.$toast('复制成功~')
					},
					fail:()=>{
						this.$toast('复制失败!')
					}
				});
			},

			toUser(){
				if(!this.token){
					uni.navigateTo({
						url: `/pages/authorization/index?shareUserId=${this.shareUserId}`
					});
					return
				}
				uni.navigateTo({
					url: `/pages/group/user/index?groupId=${this.param.groupId}`
				});
			},

			toWallet(){
				if(!this.token){
					uni.navigateTo({
						url: `/pages/authorization/index?shareUserId=${this.shareUserId}`
					});
					return
				}
				uni.navigateTo({
					url: '/pages/wallet/index'
				});
			},

			toMy(){
				if(!this.token){
					uni.navigateTo({
						url: `/pages/authorization/index?shareUserId=${this.shareUserId}`
					});
					return
				}
				uni.navigateTo({
					url: '/pages/my/index'
				});
			},

			async getGroupUserList(){
				await api.user.sell_group_user(this.param).then(res=>{
					if(res.code == 200){
						this.list = res.data.list

						uni.setNavigationBarTitle({
							title: `群成员（${res.data.total}）`
						});
					}
				})
			},

			async getUserInfo(){
				await api.user.sell_user({userId:this.userId}).then(res=>{
					if(res.code == 200){
						this.userMsg = res.data
						this.getList()
					}
				})
			},
		},
		onLoad(options) {
			if(options.shareUserId){
				this.shareUserId = options.shareUserId
			}
			this.param.groupId = options.groupId?options.groupId:1
		},
		onShow(){
			this.getGroupUserList()

			this.getUserInfo()

		},
		onShareAppMessage() {
			return {
				title: '免费用万人接单群',
				path: `/pages/group/index?shareUserId=${this.userId}`
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content{
		min-height: 100vh;
		background: #f7f7f7;
		.member_box{
			padding:0 26rpx 26rpx 26rpx;
			background: #fff;
			border-radius: 12rpx;
			margin:0 30rpx;
			.member{
				display: flex;
				flex-wrap:wrap;
				img{
					display: block;
					width: 84rpx;
					height: 84rpx;
					border-radius: 8rpx;
					margin:18rpx 26rpx 0 0;
					&:nth-child(6n){
						margin-right:0;
					}
				}
				.anniu{
					width: 42px;
					height: 42px;
					border-radius: 4px;
					box-sizing: border-box;
					border: 1px dashed #999999;
					background: none;
					margin:18rpx 0 0 0;
					display: flex;
					align-items: center;
					justify-content: center;
					&::after{
						border:none;
					}
				}
			}
			.more{
				text-align: center;
				font-size: 26rpx;
				margin-top:30rpx;
				color: #999999;
			}
		}
		.list{
			margin:20rpx 30rpx 40rpx 30rpx;
			&>div{
				display: flex;
				align-items: center;
				height: 96rpx;
				border-radius: 8rpx;
				background: #FFFFFF;
				padding:0 20rpx;
				position: relative;
				&:last-child{
					.line{
						display: none;
					}
				}
				&>img{
					width: 40rpx;
					height: 40rpx;
					margin-right:28rpx;
				}
				.msg{
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
					.text{
						color: #999999;
						font-weight: 400;
						display: flex;
						align-items: center;
						p{
							margin-right:12rpx;
							display: flex;
							align-items: center;
							img{
								width: 32rpx;
								height: 32rpx;
								border-radius: 50%;
								margin-right:10rpx;
							}
						}
						img{
							width: 28rpx;
							height: 28rpx;
							margin-left:12rpx;
						}
					}
				}
				.line{
					width: 88%;
					height: 1px;
					position: absolute;
					bottom:0;
					right:0;
					background: #EFEFEF;
				}
			}
		}
	}
</style>
